<template>
  <div class="plate-wrap">
    <h2 class="head">
      {{head}}
    </h2>
    <div class="product flex">
      <product :is-top="true" :data="data[0]"></product>
      <product :is-top="true" :data="data[1]"></product>
      <div style="width:49.5%">
        <product :is-top="false" :data="data[2]"></product>
      </div>
      <div style="width:49.5%">
        <product :is-top="false" :data="data[3]"></product>
      </div>
      <div style="width:49.5%">
        <product :is-top="false" :data="data[4]"></product>
      </div>
      <div style="width:49.5%">
        <product :is-top="false" :data="data[5]"></product>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Product from './product'
  import {getActivityList} from '../../api/activity'
  export default {
    name: "plate-card",
    props: {
      head: String,
      // categoryId: String
      skus: {
        type: Array,
        default: () => []
      }
      // data: {
      //   type: Array,
      //   default: () => []
      // }
    },
    data() {
      return {
        data: []
      }
    },
    created() {
      this.$nextTick(() => {
        if (this.skus.length) {
          this._getList()
        }
      })
    },
    methods: {
      _getList() {
        getActivityList(this.skus).then(res => {
          console.log(this.head, res)
          this.data = res
        })
      }
    },
    components: {
      Product
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
.plate-wrap{
  width: 518px;
  background: #000;
}
.head{
  height: 114px;
  text-align: center
  font-family: EstrangeloEdessa;
  font-size: 58px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 114px;
  letter-spacing: 0px;
  background: #000;
  color: #fcf7f8;
}
.product{
  margin: 0 auto;
  width: 493px;
  padding-bottom: 1px;
  flex-wrap wrap
  display: flex;
  justify-content: space-between;
}
</style>
